<template>
  <div class="viewDetail">
    <div class="viewDetail-title flex pl-16 bg_fff c_text2">
      <div
        class="tab-item commhover mr-26"
        :class="{ active: activetab == 1 }"
        @click="handleTab(1)"
      >
        规则设置
      </div>

      <el-tooltip effect="dark" placement="top" popper-class="commtooltip">
        <div slot="content">
          查看/编辑生效的具体群聊信息，请至<br />单号配置模式该功能下操作
        </div>
        <div
          class="tab-item commhover hovernot c_text4"
          :class="{ active: activetab == 2 }"
        >
          生效群
        </div>
      </el-tooltip>
    </div>
    <div class="viewDetail-big">
      <div class="tips f-13 br_4 mb-20">
        <i class="el-icon-warning f-14 c_warning mr-8"></i>
        设置完成后，请点击“保存并应用配置”按钮，才能生效；如需单个企微号配置请前往“<span
          style="color: #2d8cf0"
          >单号配置-入群欢迎语</span
        >”
      </div>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px"
        label-position="left"
        size="small"
      >
        <el-form-item label="方案名称：" prop="name">
          <el-input
            v-model="form.name"
            clearable
            placeholder="请输入方案名称，最长15个字"
            maxlength="15"
            style="width: 400px"
          ></el-input>
        </el-form-item>
        <el-form-item label="触发条件：" prop="name">
          <div class="flex">
            <el-checkbox v-model="form.checked1" class="mr-0">
              <span class="c_text"
                >进群
                <el-input
                  v-model="form.second"
                  type="number"
                  placeholder=""
                  class="mlr-6"
                  style="width: 68px"
                />
                秒后发送欢迎语
              </span>
            </el-checkbox>
            <div class="g_line">|</div>
            <el-checkbox v-model="form.checked1">
              <span class="c_text"
                >进群
                <el-input
                  v-model="form.second"
                  type="number"
                  placeholder=""
                  style="width: 68px"
                />
                人，发送欢迎语
              </span>
            </el-checkbox>
          </div>
          <div class="c_999 mt-5">
            进群时间和进群人数同时设置时，将触发先满足条件的设置项
          </div>
        </el-form-item>
        <el-form-item label="生效群：" prop="radio">
          <el-radio-group v-model="form.radio">
            <el-radio :label="1" disabled>
              <el-tooltip
                effect="dark"
                placement="top"
                content="生效群如需选择具体客户群，请前往单号配置模式下该功能点处创建。"
                popper-class="commtooltip"
              >
                <span class="c_text4">按客户群发送</span>
              </el-tooltip>
            </el-radio>
            <el-radio :label="2"
              ><span class="c_text">根据条件筛选群聊</span></el-radio
            >
          </el-radio-group>
          <div class="groupbox pb-20 p-16">
            <GroupForm />
            <div class="flexbetween bg_f7f7f7 p-5 pl-8 pr-8 e_exclude">
              <div class="fw-6 flexcenter">
                设置排除条件
                <el-switch
                  v-model="form.exclude"
                  active-color="#3070ff"
                  inactive-color="#c7c5c5"
                  :active-value="1"
                  :inactive-value="0"
                  class="ml-6"
                >
                </el-switch>
              </div>
              <div class="c_warning2">开启后将排除满足以下条件客户群</div>
            </div>
            <GroupForm v-if="form.exclude == 1" />
          </div>
          <div class="groupbox-foot plr-16">
            <el-checkbox v-model="form.checked1">
              <span class="c_text"
                >符合条件新群自动加入（建群5分钟时判断是否符合）</span
              >
            </el-checkbox>
          </div>
        </el-form-item>
        <el-form-item label="发送方式：" prop="way">
          <el-radio-group v-model="form.way">
            <el-radio
              v-for="(item, index) in ways"
              :key="index"
              :label="item.value"
              ><span class="c_text">{{ item.label }}</span></el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item  label="发送内容：">
          <MaterialContent v-if="form.way==1||form.way==2" ref="material" :maxlength='6'/>
          <MaterialContentGroup v-if="form.way==3" :maxlength='6'/>
        </el-form-item>
      </el-form>
    </div>
    <div class="greetfoot flexcenter bg_fff p-12">
      <el-button v-hasPermi="['system:groupgreeting:save']" type="primary" size="small">保存配置</el-button>
      <el-button v-hasPermi="['system:groupgreeting:savetouse']" type="warning" size="small" @click="saveApplicate">保存并应用配置</el-button>
    </div>
    <select-wechat v-if="showWechat" :visableIf.sync="showWechat" />
  </div>
</template>

<script>
//import {listUser, delUser,} from "@/api/system/user";
import GroupForm from "@/components/UserGroupComp/components/GroupForm";
import { listUser } from "@/api/system/user";
import MaterialContent from "@/components/MaterialContent";
import MaterialContentGroup from '@/components/MaterialContentGroup'
import SelectWechat from '@/components/UserGroupComp/SelectWechat.vue';
export default {
  name: "addOrEditUserOperations",
  components: {
    GroupForm,
    MaterialContent,
    MaterialContentGroup,
    SelectWechat
  },
  data() {
    return {
      activetab: 0, //当前选中
      tableHeight: 600,
      showViewConditions: false,
      showSelectProgrammeType: false, //修改方案
      showTableLabel: false,
      form: {
        name: "",
        radio: 2,
        way: 1,
        exclude: 0,
      },
      rules: {
        name: [{ required: true, message: "请输入标签名称", trigger: "blur" }],
      },
      ways: [
        { value: 1, label: "按顺序发送全部" },
        { value: 2, label: "随机发送一条" },
        { value: 3, label: "随机发送一组" },
      ],
      showWechat:false
    };
  },
  props:{
    info:{
      type:Object,
      default:{}
    }
  },
  created() {
    if(this.info){
      this.form.name = this.info.planName
    }
  },
  methods: {
    handleTab(type) {
      this.activetab = type;
    },
    getConditions() {
      this.showViewConditions = true;
    },
    getGroupInvitationMgt() {
      this.$router.push({
        path: "/customerOperationsMgt/newUserOperationsMgt/GroupInvitationMgt",
      });
    },
    // /** 查询用户列表 */
    // getList() {
    //   this.loading = true;
    //   listUser(this.addDateRange(this.queryParams, this.dateRange)).then(
    //     (response) => {
    //       this.tableDataList = response.rows;
    //       this.total = response.total;
    //       this.loading = false;
    //     }
    //   );
    // },
    /** 搜索按钮操作 */
    // handleQuery() {
    //   this.queryParams.pageNum = 1;
    //   this.getList();
    // },

    saveApplicate(){
      this.showWechat = true
    },
  },
};
</script>
<style lang="scss" scoped>
.viewDetail {
  height: 100%;
  position: relative;
  // overflow-y: auto;
  .viewDetail-title {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #e9e9e9;
    .tab-item {
      height: 100%;
      border-bottom: 1px solid transparent;
      &.active {
        color: #3070ff;
        border-bottom-color: #3070ff;
      }
    }
  }
  .viewDetail-footer {
    position: absolute;
    left: 0px;
    bottom: 0px;
    right: 0px;
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #eee;
  }
  .tips {
    background: #ffede3;
    position: relative;
    display: flex;
    align-items: center;
    padding: 8px 15px;
    word-wrap: break-word;
  }
}
.viewDetail-big {
  height: calc(100vh - 200px);
  overflow-y: auto;
  padding: 20px;
}
.g_line {
  color: rgba($color: #000000, $alpha: 0.06);
  margin: 0px 20px;
}
.groupbox {
  border: 1px solid rgb(238, 238, 238);
}
.e_exclude {
  width: 568px;
  margin: 20px 0;
}
.groupbox-foot {
  display: flex;
  align-items: center;
  height: 46px;
  background: #f5f6f7;
  border-radius: 2px;
  outline: 1px solid #e9e9e9;
}
.greetfoot {
  border-top: 1px solid #e9e9e9;
  position: sticky;
  bottom: 0;
  z-index: 999;
}
</style>
